<template>
  <div class="container">
    <el-card>
      <div class="top">
        <!-- 面包屑区域 v-if="subjects.id && subjects.name" -->
        <el-breadcrumb
          separator-class="el-icon-arrow-right"
          v-if="subjects.id && subjects.name"
        >
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>{{
            subjects.id ? subjects.name : ""
          }}</el-breadcrumb-item>
          <el-breadcrumb-item>目录管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 面包屑区域 -->
        <!-- 标签名称 -->
        <el-row>
          <el-col :span="18">
            <el-col :span="18">
              <el-form :inline="true" :model="formInline">
                <el-form-item label="标签名称">
                  <el-input v-model="formInline.tagName"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                  <el-select v-model="formInline.state" placeholder="请选择">
                    <el-option label="启用" :value="1"></el-option>
                    <el-option label="禁用" :value="0"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="6" :pull="2">
              <el-button @click="onClean">清除</el-button>
              <el-button type="primary" @click="onSearch">搜索</el-button>
            </el-col>
          </el-col>
          <el-col :span="6" :push="2">
            <el-link
              icon="el-icon-back"
              type="primary"
              v-if="subjects.id && subjects.name"
              @click="$router.back()"
              >返回学科</el-link
            >
            <el-button
              type="success"
              icon="el-icon-edit"
              @click="showDialog = true"
              >新增标签</el-button
            >
          </el-col>
        </el-row>
      </div>
      <!-- 标签名称 -->
      <!-- 数据条数 -->
      <el-alert
        :title="`数据一共${counts}条`"
        type="info"
        show-icon
        :closable="false"
      ></el-alert>
      <!-- 数据条数 -->
      <!-- 表格区域 -->
      <el-table :data="tagsList">
        <el-table-column label="序号" type="index" />
        <el-table-column label="所属学科" prop="subjectName" />
        <el-table-column label="标签名称" prop="tagName" />
        <el-table-column label="创建者" prop="username" />
        <el-table-column label="创建日期" prop="addDate" />
        <el-table-column label="状态" prop="state">
          <!-- 作用域插槽 -->
          <template slot-scope="{ row }">
            {{ row.state === 1 ? "已启用" : "已禁用" }}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right">
          <!-- 作用域插槽 -->
          <template slot-scope="{ row }">
            <el-button type="text" @click="onState(row)">{{
              row.state === 1 ? "禁用" : "启用"
            }}</el-button>
            <el-button
              type="text"
              :disabled="row.state === 1"
              @click="onChange(row)"
              >修改</el-button
            >
            <el-button
              type="text"
              :disabled="row.state === 1"
              @click="onDelete(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 表格区域 -->
      <!-- 分页组件 -->
      <el-row type="flex" justify="end" align="middle" style="height: 60px">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="changePage"
          :current-page="page.page"
          :page-size="page.pagesize"
          :total="page.total"
          :page-sizes="[5, 10, 20, 50]"
          layout="sizes,prev, pager, next,jumper"
        >
          >
        </el-pagination>
      </el-row>
      <!-- 分页组件 -->
    </el-card>
    <!-- 新增标签弹框 -->
    <el-dialog
      title="新增标签"
      :visible.sync="showDialog"
      style="width: 70%"
      @close="btnCancel"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="addContent"
        label-width="100px"
      >
        <el-form-item
          label="所属学科"
          prop="region"
          v-if="!subjects.id && !subjects.name"
        >
          <el-select
            v-model="ruleForm.region"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="item in subSimpleList"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="name">
          <el-input
            v-model="ruleForm.name"
            placeholder="请输入目录名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="btnCancel">取消</el-button>
        <el-button type="primary" @click="btnOK">确定</el-button>
      </div>
    </el-dialog>
    <!-- 新增标签弹框 -->
    <!-- 修改弹框 -->
    <el-dialog
      title="修改目录"
      :visible.sync="changeDialog"
      style="width: 70%"
      @close="onChangeCancel"
    >
      <el-form
        :model="changeForm"
        :rules="rules"
        ref="addContent"
        label-width="100px"
      >
        <el-form-item label="所属学科" prop="region" v-if="!$route.query.id">
          <el-select
            v-model="changeForm.region"
            placeholder="请选择"
          >
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="item in subSimpleList"
              :key="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="name">
          <el-input
            v-model="changeForm.name"
            placeholder="请输入目录名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="onChangeCancel">取消</el-button>
        <el-button type="primary" @click="onChangeOK">确定</el-button>
      </div>
    </el-dialog>
    <!-- 修改弹框 -->
  </div>
</template>

<script>
import { list, remove, add, changeState, update } from '@/api/hmmm/tags.js'
import { simple } from '@/api/hmmm/subjects.js'

export default {
  data () {
    return {
      formInline: {
        subjectID: null,
        tagName: null, // 标签名称
        state: null // 状态
      },
      tagsList: [], // 标签数据列表
      subSimpleList: [], // 学科简单列表数据
      counts: 0, // 总数据
      tagsId: '', // 标签id
      page: {
        page: 1,
        pagesize: 10,
        total: 0 // 总数
      },
      showDialog: false, // 控制新增标签弹窗
      changeDialog: false, // 控制修改标签弹窗
      addDialog: false, // 控制新增目录弹窗
      changeForm: {
        region: '', // 修改所属学科
        name: '' // 修改目录名称
      },
      addForm: {
        region: '', // 修改所属学科
        name: '' // 修改目录名称
      },
      ruleForm: {
        region: '', // 所属学科
        name: null // 目录名称
      },
      rules: {
        region: [{ required: true, message: '请选择学科', trigger: 'blur' }],
        name: [{ required: true, message: '请输入标签名称', trigger: 'blur' }]
      }
    }
  },
  computed: {
    subjects () {
      return this.$route.query || null
    }
  },
  created () {
    this.getTagsList()
    this.getSimpleList()
  },
  methods: {
    // 获取标签列表数据
    async getTagsList () {
      if (this.$route.query.id) {
        this.formInline.subjectID = this.$route.query.id
      }
      const { data } = await list({ ...this.page, ...this.formInline })
      // console.log(data);
      data.items.forEach((item) => {
        item.addDate = this.$dayjs(item.addDate).format('YYYY-MM-DD hh:mm:ss')
      })
      this.tagsList = data.items
      this.counts = data.counts
      this.page.total = data.counts
    },
    // 点击禁用
    async onState (row) {
      // console.log(row);
      try {
        await changeState({
          id: row.id,
          state: row.state === 1 ? 0 : 1
        })
        this.$message.success('操作成功')
        row.state = row.state === 1 ? 0 : 1
      } catch (error) {
        this.$message.success('操作失败')
      }
    },
    // 点击清除
    onClean () {
      this.formInline = {
        tagName: '', // 标签名称
        state: '' // 状态
      }
      this.getTagsList()
    },
    // 点击搜索
    onSearch () {
      this.getTagsList()
    },
    // 点击修改
    async onChange (row) {
      // console.log(row)
      this.changeDialog = true
      this.changeForm.region = row.subjectID
      this.changeForm.name = row.tagName // 目录名称
      this.tagsId = row.id
    },
    // 确定修改
    async onChangeOK () {
      await update({
        id: this.tagsId,
        subjectID: this.changeForm.region,
        tagName: this.changeForm.name
      })
      this.$message.success('修改成功')
      this.changeDialog = false
      this.getTagsList()
    },
    // 取消修改
    onChangeCancel () {
      this.changeDialog = false
      this.changeForm.region = '' // 所属学科
    },
    // 点击删除
    async onDelete (id) {
      await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove(id)
          this.$message.success('删除成功')
          this.getTagsList()
        })
        .catch(() => {
          this.$message.success('已取消删除')
        })
    },
    // 获取学科简单列表数据
    async getSimpleList () {
      try {
        const { data } = await simple()
        this.subSimpleList = data
      } catch (error) {}
    },
    // 添加标签
    async btnOK () {
      try {
        if (this.subjects.id && this.subjects.name) {
          this.subjects.id = this.$route.query.id * 1
          await add({
            subjectID: this.subjects.id,
            tagName: this.ruleForm.name
          })
          this.$message.success('添加成功')
          this.showDialog = false
          // this.getTagsList();
        } else {
          await add({
            subjectID: this.ruleForm.region,
            tagName: this.ruleForm.name
          })
          this.$message.success('添加成功')
          this.showDialog = false
          this.getTagsList()
        }
      } catch (error) {
        this.$message.success('添加失败')
      }
    },
    // 取消添加
    btnCancel () {
      if (this.subjects.id && this.subjects.name) {
        this.ruleForm.name = ''
      } else {
        this.ruleForm = {
          name: '',
          region: ''
        }
      }

      this.showDialog = false
    },
    // 点击页码切换另一页信息
    changePage (newPage) {
      this.page.page = newPage // newPage是最新页码
      this.getTagsList()
    },
    // 分页
    handleSizeChange (pagesize) {
      this.page.page = 1
      this.page.pagesize = pagesize
      this.getTagsList()
    }
  }
}
</script>

<style scoped lang='less'>
.container {
  margin: 10px 10px 20px;
  background-color: #fff;
}
</style>
